<template>
  <div class="apply_vacate">
    <navigate>申请请假</navigate>
    <div class="apply_cont" v-if="info.isApply == 0">
      <div class="head_label">
        <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
        <div class="label_txt">填写请假信息</div>
      </div>
      <div class="apply_box white_box">
        <div>请假提交对象：{{ info.submitPerson }}</div>
        <div class="dividing_line"></div>
        <div>
          <div>问题描述：</div>
          <textarea name="" id="" cols="30" rows="10" placeholder="请输入问题描述。" v-model="desc"></textarea>
        </div>
      </div>
      <div class="applt_btn" @click="toApply">提交申请</div>
    </div>

    <div class="apply_cont" v-else>
      <div class="head_label">
        <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
        <div class="label_txt">请假提交信息</div>
      </div>
      <div class="white_box">
        <div class="item_info dis_flex">
          <div class="apply_txt">提交对象：</div>
          <div class="apply_info">{{ info.submitPerson }}</div>
        </div>
        <div class="item_info dis_flex">
          <div class="apply_txt">问题描述：</div>
          <div class="apply_info desc_info">{{ info.leaveReason }}</div>
        </div>
      </div>
      <div class="white_box dis_flex al_center">
        <div class="apply_txt dis_flex">审核结果：</div>
        <div class="agree_box dis_flex al_center">
          <img src="@/assets/images/common/success_icon.png" alt="" class="agree_img" />
          <div class="agree_txt">已同意</div>
        </div>
      </div>
    </div>

    <!-- 申请成功弹窗 -->
    <van-popup v-model="successPop" round position="center">
      <div class="pop_box">
        <img src="@/assets/images/common/success_icon.png" alt="" class="pop_tips_img" />
        <div class="pop_tips_txt" @click="">提交成功，请待管理员处理！</div>
      </div>
    </van-popup>
  </div>
</template>


<script>
import { applyVacate } from '@/api/funcation/groupActivity'
import { lectureApplyLeave } from '@/api/funcation/training'
export default {
  data() {
    return {
      successPop: false,
      info: {},
      desc: ""
    };
  },
  created() {
    this.info = JSON.parse(this.$route.query.info)
  },
  methods: {

    async toApply() {
      let par = {
        id: this.info.id,
        leave_reason: this.desc
      }
      //type为1是培训讲座，否则是团体报告
      if (this.info.type == 1) {
        let res = await lectureApplyLeave(par)
        if (res.code == 200) {
          this.$toast.success("请假成功");
        }
      } else {
        let res = await applyVacate(par)
        if (res.code == 200) {
          this.$toast.success("请假成功");
        }
      }

    },
  }
};
</script>

<style lang="less" scoped>
.dis_flex {
  display: flex;
  align-items: baseline;
}

.al_center {
  align-items: center;
}

.white_box {
  background: #ffffff;
  border-radius: 6.67px;
  padding: 16px 10px;
  margin-bottom: 10px;

  &:last-child {
    margin: 0;
  }
}

.apply_vacate {
  font-size: 14.67px;
  background-color: #f4f6fa;
  color: #777777;
}

.apply_cont {
  padding: 0 10px;
}

//标签
.head_label {
  display: flex;
  align-items: center;
  margin: 19px 0;
}

.label_img {
  width: 5.33px;
  height: 15.33px;
  margin-right: 11.33px;
}

.label_txt {
  font-weight: bold;
  font-size: 14.67px;
  line-height: 14.67px;
  color: #333333;
}

.apply_box {
  padding: 16px 10px;
}

.dividing_line {
  margin: 15px 0;
  border-bottom: 0.33px solid #dddddd;
}

textarea {
  width: 100%;
  height: 181px;
  border: 0;
  padding: 13px 10px;
  background-color: rgba(51, 51, 51, 0.05);
  box-sizing: border-box;
  border-radius: 6.67px;
  margin-top: 16px;
}

.applt_btn {
  width: 333.33px;
  height: 46.67px;
  line-height: 46.67px;
  text-align: center;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
  border-radius: 6.67px;
  color: #ffffff;
  font-size: 16.67px;
  margin: 30px auto 0 auto;
}

.item_info {
  padding: 16px 0;
  border-bottom: 0.33px solid #dddddd;

  &:last-child {
    border: 0;
  }
}

.apply_txt,
.apply_info {
  min-width: 90px;
  font-size: 14.67px;
  line-height: 14.67px;
}

.apply_info {
  color: #333333;
}

.desc_info {
  line-height: 29.33px;
}

.agree_txt {
  color: #14c76a;
  font-size: 14.67px;
  line-height: 14.67px;
}

.agree_img {
  width: 15.33px;
  height: 15.33px;
  margin-right: 8.67px;
}

.pop_box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 297.33px;
  height: 53.33px;
  line-height: 53.33px;
}

.pop_tips_img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.pop_tips_txt {
  font-size: 16.67px;
  color: #ffffff;
}

::v-deep.van-popup--center.van-popup--round {
  border-radius: 26.67px;
  background: #000000;
  opacity: 0.8;
}
</style>